<template>
  <div class="m-cart u-home-top">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="购物车" height=".88rem" bgcolor="#fff" color="" fontsize=".3rem" :fixed="true">
      <yd-icon slot="right" name="compose" size=".4rem" color="#fff" @click.native="onEdit"></yd-icon>
    </yd-navbar>

    <!-- 没有数据 -->
    <w-carto-empty :isShowCart="true" v-if="!goodCartAll.length"></w-carto-empty>
    <!-- 有内容 -->
    <div class="m-cart-ct" v-else>
      <div class="yd-list-theme9" v-for="(goodCart, index) in goodCartAll">
        <div class="left-radio" @click="isSelected(index, goodCart.goodsEntity.goodsCartCount * goodCart.goodsEntity.goodsPrice)">
          <span :class="{active: isSelect[index] == 1}"></span>
        </div>
        <div class="shop-img">
          <img  slot="img" v-lazy='goodCart.goodsEntity.carousel'>
        </div>
        <div class="right-price">
          <div class="price-header">
            <div class="name">{{goodCart.goodsEntity.goodsName}}</div>
            <div class="price price-position">{{goodCart.goodsEntity.goodsPrice.toFixed(2)}}￥</div>
          </div>
          <div class="price-header">
            <div class="name">
              <w-spinner :max="11" :min="1" v-model="goodCart.goodsEntity.goodsCartCount" @input="onSpinner(goodCart.goodsEntity.goodsCartCount)"></w-spinner>
            </div>
            <div class="delete">
              <span>x</span>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class="footer-price">
          <div class="footer-all" @click="selectAll()">
            <span class="footer-s-all" :class="{active: isSelectAll == 1}"></span>
            <span>选择全部</span>
          </div>
          <div class="footer-all-price">
            <span>商品总价（不含运费）</span>
            <span class="price">￥0.00</span>
          </div>
        </div>
        <div class="deal">结算</div>
      </footer>
    </div>
    <!-- 猜你喜欢 -->
    <w-like :likeList="likeList"></w-like>

  </div>
</template>

<script>
  import {apiSelectCartAll} from 'js/api'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    data() {
      return {
        isSelectAll: 0,
        goodCartAll: [],
        likeList: [],
        isSelect: [],
        selectPrice: []
      }
    },
    created() {
      this.selectCartAll()
      this.findFootPrint({
        token: this.token,
        callback: data => {
          this.likeList = data.ftList
        }
      })
    },
    methods: {
      ...mapActions(['findFootPrint']),
      // 获取所有购物车列表
      selectCartAll() {
        apiSelectCartAll(this.token).then(data => {
          data.goodsCartList.forEach(item => {
            this.isSelect.push(0)
            this.selectPrice.push(0)
          })
          this.goodCartAll = data.goodsCartList
        })
      },
      // 获取数量
      onSpinner(value) {
      },
      // 判断是否被选中
      isSelected(key, value) {
        if (this.isSelect[key] === 0) {
          this.$set(this.isSelect, key, 1)
          this.$set(this.selectPrice, key, value)
        } else {
          this.$set(this.isSelect, key, 0)
          this.$set(this.selectPrice, key, 0)
        }
        let isSelectAlll = true
        this.isSelect.forEach((item, index) => {
          if (item === 0) {
            isSelectAlll = false
          }
        })
        console.log(this.isSelectAlll, 9999)
        console.log(this.isSelect, 9999)
        if (isSelectAlll) {
          this.isSelectAll = 1
        } else {
          this.isSelectAll = 0
        }
        console.log(this.isSelectAll, 888)
      },
      // 判断是否选中全部
      selectAll() {
        if (this.isSelectAll === 0) {
          this.isSelectAll = 1
          this.isSelect.forEach((item, index) => {
            this.$set(this.isSelect, index, 1)
          })
        } else {
          this.isSelectAll = 0
          this.isSelect.forEach((item, index) => {
            this.$set(this.isSelect, index, 0)
          })
        }
      },
      // 计算总价
      calcTotalPrice() {
        
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-cart-ct {
    margin-bottom: 0.2rem;
    background-color: #fff;
    .tit {
      display: inline-block;
      width: 50%;
      padding-right: 0.1rem;
      &:nth-child(2) {
        text-align: right;
      }
    }
  }
  .shop-img {
    height: 2.2rem;
    width: 2.2rem;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .left-radio {
    span {
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      background: url(./img/btn_point.png) no-repeat center center;
      background-size: 100%;
      &.active {
        background: url(./img/btn_point_hl.png) no-repeat center center;
        background-size: 100%;
      }
    }
  }
  .right-price {
    .price-header {
      display: flex;
      .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        .m-spinner {
          input {
            width: 1.0rem !important;
          }
          i {
            width: 0.6rem !important;
          }
        }
      }
      .price-position {
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 1rem;
    z-index: 9;
    background-color: #fff;
    width: 100%;
    .footer-price {
      display: flex;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.25rem;
      padding: 0 0.3rem;
      .footer-all-price {
        .price {
          color: #ef5c6e;
        }
      }
      .footer-all {
        display: flex;
        align-items: center;
        .footer-s-all {
          margin-right: 0.2rem;
          display: inline-block;
          width: 0.4rem;
          height: 0.4rem;
          background: url(./img/btn_point.png) no-repeat center center;
          background-size: 100%;
          &.active {
            background: url(./img/btn_point_hl.png) no-repeat center center;
            background-size: 100%;
          }
        }
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
    .deal {
      height: 1rem;
      line-height: 1rem;
      text-align: center;
      background-color: #ef5c6e;
      color: #fff;
      font-size: 0.36rem;
      word-spacing: 0.1rem;
    }
  }
</style>